@import "@/assets/scss/tools.scss";
@import "@/assets/scss/theme.scss";
$btnbg: $src-cdn + '/clock-calendar-1.png';
page {
  height: 100%;
  overflow: auto;
}
view {
  box-sizing: border-box;
}
.clock-calendar {
  height: 100%;
  display: flex;
  flex-direction: column;
  .calendar {
    padding: 32px 36px 0;
    &-switch {
      @include normal-flex();
      font-size: 40px;
      margin-bottom: 32px;
      color: $text-color-normal;
      font-weight: bold;
      image {
        width: 14px;
        height: 24px;
      }
      &__left,
      &__right {
        @include normal-flex;
      }
      &__left image {
        margin-right: 46px;
      }
      &__right image {
        margin-left: 48px;
      }
    }
    &-weeks {
      @include normal-flex(space-between);
      color: $text-color-secondary;
      font-size: 24px;
      margin-bottom: 24px;
      &:nth-last-child(1) {
        margin-bottom: 0;
      }
      > view {
        width: 64px;
        text-align: center;
      }
    }
    &-days {
      &__in-week {
        @include normal-flex(space-between);
        margin-bottom: 32px;
      }
      &__day {
        @include normal-flex();
        width: 64px;
        height: 64px;
        font-weight: bold;
        position: relative;
        &--past-time {
          color: $text-color-secondary;
        }
        &--today {
          color: #ff8000;
          font-size: 36px;
        }
        &--choosed {
          border: 2px solid #a13d0f;
          background-color: #ffad1c;
          font-weight: bold;
          font-size: 36px;
          color: #fff;
          border-radius: 50%;
        }
        &--pointer__normal,
        &--pointer__reissue {
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #ff8000;
          bottom: -4px;
        }
        &--pointer__reissue {
          background-color: #08bd6f;
        }
        &--bubble__start,
        &--bubble__end,
        &--bubble__reissue {
          position: absolute;
          width: 32px;
          height: 32px;
          background: #ff8000;
          border: 2px solid #a13d0f;
          font-size: 24px;
          color: #ffffff;
          text-align: center;
          font-weight: normal;
          right: -10px;
          top: -10px;
          border-radius: 20px 20px 20px 8px;
        }
        &--bubble__reissue {
          background: #08bd6f;
          border: 2px solid #027644;
        }
      }
    }
  }
  .clock-info {
    background: #fff7e0;
    padding-bottom: 32px;
    flex: 1;
    > .special-box {
      margin: 46px 0 0;
      display: flex;
      justify-content: center;
    }
    &__title {
      height: 60px;
      text-align: center;
      color: #a13d0f;
      font-size: 36px;
      font-weight: bold;
      line-height: 60px;
    }
    &__list {
      width: 100%;
      margin-top: 30px;
      padding: 0 30px;
      &-item {
        padding: 12px 0;
      }
    }
    &__default {
      margin-top: 62px;
      text-align: center;
      image {
        width: 380px;
        height: 200px;
        margin-bottom: 32px;
      }
      &--tip {
        color: #909399;
        font-size: 28px;
        margin-bottom: 48px;
      }
      &--btn {
        display: inline-block;
        width: 300px;
        height: 88px;
        background-image: url($btnbg);
        background-size: 100%;
        font-weight: bold;
        font-size: 32px;
        color: #fff;
        line-height: 88px;
      }
    }
  }
}
